import { PlayCircleTwoTone } from '@ant-design/icons';
import { Handle, Position } from '@xyflow/react';
import { Collapse, Form, Input } from 'antd';
import React, { memo } from 'react';
import styles from './index.module.less';
/**
 * 开始事件节点
 * @param {*} param0
 * @returns
 */
function SqlScriptNode({ id, type, data }) {
  
  const [form] = Form.useForm();

  // 内容定义
  const items = [
    {
      key: 'node-start',
      label: (
        <>
          <div>
            <PlayCircleTwoTone /> SQL脚本
          </div>
          <div style={{ color: '#1c1d2399', transform: 'translateX(-23px)' }}>
            执行简单的sql脚本代码
          </div>
        </>
      ),
      children: (
        <>
          <Form form={form} layout="vertical" size="small">
            <Form.Item
              label="SQL脚本"
              required
              tooltip="每次对话前，给用户发送的信息"
            >
              <Input.TextArea placeholder="请输入SQL脚本" rows={3} />
            </Form.Item>
          </Form>
        </>
      ),
      style: {
        background: '#fff',
      },
    },
  ];

  return (
    <>
      <Handle type="source" position={Position.Left} />
      <Collapse
        bordered={false}
        defaultActiveKey={['1']}
        className={styles.sqlScript}
        items={items}
      />
      {/* 定义连接点：起点 */}
      <Handle type="target" position={Position.Right} />
    </>
  );
}

export default memo(SqlScriptNode);
